<template>
	<view class="page">
		<view class="cu-bar fixed text-white" :style="{ height: CustomBar + 'px', paddingTop: StatusBar + 'px' }">
			<view class="action" @tap="back()"><text class="cuIcon-back"></text></view>
			<view class="content" :style="[{ top: StatusBar + 'px' }]">{{ i18n['订单详情'] }}</view>
		</view>
		<!-- 订单状态-开始 -->
		<view class="status-box flex align-center justify-between">
			<view class=" text-white">
				<view class="status">{{ afterInfo.status | statusFil }}</view>
				<view class="text-white text-sm" v-if="afterInfo.status==1">等待物流员取货</view>
				<view class="text-white text-sm" v-if="afterInfo.status==2||afterInfo.status==3">等分理处人员送货</view>
			</view>
			<image class="icon" :src="afterInfo.status | statusIconPt" mode="aspectFit"></image>
		</view>
		<!-- 订单状态-结束 -->
		<!-- 取货员信息  待取货  待收货   driver_info-->
		<view class="body_top padding text-df flex align-center justify-between"
			v-if="afterInfo.status>0&&afterInfo.status<4&&afterInfo.driver_info&&afterInfo.driver_info.user_nickname">
			<view class="text-theme flex align-center ">
				<image :src="afterInfo.driver_info.head_img" class="fu-block-88 margin-right-xs radius-100 bg-f8"
					mode="aspectFill"></image>
				<text>{{afterInfo.driver_info.user_nickname}}</text>
			</view>
			<view class="   " @tap='callPhone(afterInfo.driver_info.mobile)'>
				<image src="../../static/ph.png" mode="aspectFill" class="width-30 height-40"></image>
			</view>
		</view>
		<!-- 0：申请中  1：待取货  2、3：待收货  4：已完成   -1：售后取消   -2：已拒绝 -->
		<!-- 文字状态  申请中  -->
		<view class="body_top padding text-df " v-if="afterInfo.status ==0||afterInfo.status =='-2'">
			<view class="text-333 text-bold ">
				<!-- 申请中 -->
				<text v-if="afterInfo.status ==0">用户已成功发起退款申请，请耐心等待您处理。</text>
				<!-- 失败 -->
				<text v-if="afterInfo.status =='-2'">您已拒绝{{afterInfo.refund_type==2?'退款退货':'退款'}}的售后申请</text>
			</view>
			<view class=" text-sm text-999 margin-top-sm  " v-if="afterInfo.status ==0">
				<view>您同意仅退款后，用户支付商品金额自动退还到用户的账户中；</view>
				<view>您同意退款退货后，您收到商品后用户支付商品金额自动退还到用户的账户中；</view>
				<view>如您拒绝，用户可以修改申请后再次发起，您需要重新处理。</view>
			</view>
			<view class=" text-sm text-999 margin-top-sm  " v-if="afterInfo.status =='-2'">
				<view>{{afterInfo.refund_reason}}</view>
			</view>
		</view>
		<!-- 退款信息 已完成状态 -->
		<view class="body_top padding text-df " v-if="afterInfo.status==4||afterInfo.status==5">
			<view class="text-333 text-bold  padding-bottom solid-bottom">
				<text>商家已退款</text>
			</view>
			<view class=" text-sm text-999 margin-top-sm  ">
				<view class="flex align-center">
					<view class="width-150">退款金额：</view> <text>￥{{afterInfo.refund_money}}</text>
				</view>
				<view class="flex align-center padding-tb">
					<view class="width-150">退款账号：</view> <text>{{afterInfo.account}}</text>
				</view>
				<view class="flex align-center">
					<view class="width-150">退款时间：</view> <text>{{afterInfo.refund_time}}</text>
				</view>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="padding-lr-24 margin-top-sm posZindex">
			<view class="radius-16 bg-white padding">
				<!-- <view class="text-bold text-333 text-df">{{ i18n['商品信息'] }}</view> -->
				<view class="comment-title">
					{{i18n['退款信息']}}
				</view>
				<view class="flex padding-bottom-sm solid-bottom" @click="navToDetail" v-if="afterInfo.goods">
					<view class="block-200 relative margin-right-sm radius overHidden">
						<fu-image :src="afterInfo.goods.goods_thumb" mode="aspectFill"></fu-image>
						<view class="box-kong padding-lr-16 padding-tb-4 text-white text-sm"
							v-if="afterInfo.goods.price_port_name">
							{{afterInfo.goods.price_port_name}}
						</view>
					</view>
					<view class="flex-sub flex flex-direction justify-between" style="width: 438rpx;">
						<view class="">
							<view class="text-df text-cut-2 text-333 text-weight-500">{{ afterInfo.goods.goods_name }}
							</view>
						</view>
						<view class="flex justify-between">
							<text class="text-sm">
								<text
									class="text-bold text-lg text-price text-red">{{ afterInfo.goods.shop_price }}</text>
							</text>
							<text class="text-sm margin-left">
								<text class="text-weight-400 text-999">x{{ afterInfo.goods.num }}</text>
							</text>
						</view>
					</view>
				</view>
				<view class="body_top  text-sm padding-bottom solid-bottom ">
					<view class="text-theme ">订单代码：{{afterInfo.order_code||''}} </view>
					<view class="text-999 margin-top-sm">订单编号：{{afterInfo.order_sn}} </view>
				</view>
				<view class="list-item padding-top-sm">
					<text class="title">{{ i18n['服务类型'] }}</text>
					<text class="text-sm">{{ afterInfo && afterInfo.refund_type=='2'?'退货退款':'仅退款' }}</text>
				</view>
				<view class="list-item">
					<text class="title">退款金额</text>
					<text class="text-sm text-price">{{ afterInfo && afterInfo.refund_money }}</text>
				</view>
				<view class="list-item flex">
					<text class="title">{{ i18n['退款原因'] }}</text>
					<text class="text-sm word-break-all">{{ afterInfo && afterInfo.refund_content }}</text>
				</view>
				<view class="list-item">
					<text class="title">{{ i18n['申请时间'] }}</text>
					<text class="text-sm">{{ afterInfo && afterInfo.create_time }}</text>
				</view>
				<view class="list-item ">
					<text class="title">{{ i18n['退款编号'] }}</text>
					<text class="text-sm">{{ afterInfo && afterInfo.server_no }}</text>
					<text class="text-sm text-2f margin-left"
						@click="copyInfo(afterInfo.server_no)">{{ i18n['复制'] }}</text>
				</view>
				<view class="list-item flex align-start"
					v-if="afterInfo&&afterInfo.refund_picture && afterInfo.refund_picture.length != 0">
					<view class="title">{{ i18n['退款凭证'] }}</view>
					<view class="flex">
						<view class="img-wrap" v-for="(item, index) in afterInfo.refund_picture" :key="index"
							@click="previewImage(index)">
							<fu-image :src="item" mode="aspectFill"></fu-image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 退货订单的物流信息 end -->
		<!-- 0：申请中  1：待取货  2、3：待收货  4：已完成   -1：售后取消   -2：已拒绝 -->
		<view class="solid-top bottom-action bg-f8  flex justify-between align-center">
			<view class=" bg-white kefu line-eee padding-tb-sm  text-center radius-100" @tap="callPhone(kfPhone)"
				v-if="afterInfo.status!=0" :class="afterInfo.status==1?'w98':'w45'">
				<image src="../../static/kf.png" mode="widthFix" class="img"></image>
				<text>联系客服</text>
			</view>
			<view class="line-eee padding-tb-sm w45 text-center radius-100 bg-white " v-if="afterInfo.status==0"
				@click="refunceApply">
				拒绝申请
			</view>
			<view class="bg-theme1 w45 text-center padding-tb-sm radius-100 text-white margin-left-sm "
				v-if="afterInfo.status==0" @click="agreeApply">
				同意申请
			</view>
			<view class="line-eee padding-tb-sm w45 text-center radius-100 bg-white " @click="delOrder"
				v-if="afterInfo.status==4||afterInfo.status==5||afterInfo.status==-1||afterInfo.status==-2">
				{{ i18n['删除订单'] }}
			</view>
			<view class="line-eee padding-tb-sm w45 text-center radius-100 bg-white " @click="confirmReciver"
				v-if="afterInfo.status==2||afterInfo.status==3">
				确认收货
			</view>

		</view>
		<view class="back-success-wrap" v-if="refundPop">
			<view class="mask" @click="refundPop = false">
			</view>
			<view class="back-content flex flex-direction justify-between align-center">
				<view
					class="back-content-info bg-white flex flex-direction justify-between align-center padding-top-50 padding-bottom">
					<view class="text-bold text-333 ">拒绝申请售后的原因</view>
					<view class="bg-f8 padding-sm width-480 margin-lr radius-16 height-250">
						<textarea type="text" v-model="refundReason" placeholder-class="text-eee"
							class="text-333 w100 height-200 text-df" maxlength="50" placeholder="请输入拒绝申请售后的原因"></textarea>
					</view>
					<view class="text-theme text-df text-333 text-center padding-top solid-top w100" @tap='confirmRefund'> 确认</view>
				</view>
				<view class="cuIcon-roundclose text-white text-xxl  text-62" @click="refundPop = false">
				</view>
			</view>
		</view>
		<!-- 操作售后弹框 -->
		<view class="back-success-wrap" v-if="setRefundPop">
			<view class="mask" @click="setRefundPop = false">
			</view>
			<view class="back-content flex flex-direction justify-between align-center">
				<view class="back-content-info bg-white flex flex-direction justify-between align-center padding-top-50"
					style="height: 280rpx;">
					<view class="text-bold text-333 ">提示</view>
					<view class="text-bold text-333 ">确定同意售后申请吗？</view>
					<view class="flex align-center justify-around solid-top w100 height-100">
						<view class=" text-df text-999 text-center   w49 solid-right height-100 line-height-100"
							@tap='refundConfirm(2)'> 退货退款</view>
						<view class="text-theme text-df text-333 text-center   w49 height-100 line-height-100"
							@tap='refundConfirm(1)'> 仅退款</view>
					</view>
				</view>
				<view class="cuIcon-roundclose text-white text-xxl  text-62" @click="setRefundPop = false">
				</view>
			</view>
		</view>
		<fu-notwork></fu-notwork>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				initSteps: false,
				imgWechatUrl: this.imgWechatUrl,
				id: null,
				steps: [{
						title: global.i18n['提交申请']
					},
					{
						title: global.i18n['商家审核']
					},
					{
						title: global.i18n['商家收货']
					},
					{
						title: global.i18n['退款']
					},
					{
						title: global.i18n['完成']
					}
				],
				speed: 0,
				afterExp: {
					express_no: 0
				},
				status: 0,
				statusStr: '',
				goods_id: 0,
				sku_id: 0,
				physical: [], // {Array} 换货订单物流信息
				backSuccessShow: false,
				updata_time: 0, //撤销时间
				refund_time: 0, //退款时间
				refund_money: 0, //退款金额
				refund_account: '', //退款账户
				order_sn: '',
				afterInfo: {}, // 售后订单详情信息
				goodsInfo: {}, // 退款商品信息
				itemIndex: '', // 列表订单索引
				index: '',
				service_info: '', //客服信息
				refundPop: false, //拒绝售后弹框
				setRefundPop: false, //售后弹框
				refundReason: '', //拒绝售后原因
				kfPhone: '', //
			};
		},
		computed: {
			refundInfoShow() {
				let flag = false;
				// 不能不判断，后续可能会有换货，换货现在没有原型图，不太清楚流程
				if (this.afterInfo.refund_type == 1 || this.afterInfo.refund_type == 2) {
					if (this.afterInfo.status == 3) {
						flag = true;
					}
				}
				return flag;
			}
		},
		onShow() {
			this.kfPhone = uni.getStorageSync('kfNum')
			console.log(this.kfPhone,'kfPhone');
			setTimeout(() => {
				this.getData();
			}, 500);
		},
		onLoad(options) {
			this.setNavigationBarTitle(this.i18n['售后详情']);
			const {
				id,
				itemIndex
			} = options;
			this.id = id;
			this.itemIndex = itemIndex;
			// this.getCustomerInfo()
		},
		methods: {
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			back() {
				uni.navigateBack()
			},
			refundConfirm(e) {
				let that = this
				that.$api.post('/v1/63e4b3ba26de0', {
					rf_id: that.id,
					refund_type: e // 1退款 2退货退款
				}).then(result => {
					if (result.data.code == 1) {
						this.getData();
						this.setRefundPop=false
					} else {
						that.$message.info(result.data.msg);
					}
				}).catch(err => {
					console.log(err);
				});
			},
			agreeApply() {
				this.setRefundPop=true
				
			},
			// 拒绝申请
			refunceApply() {
				this.refundPop = true

			},
			confirmRefund() {
				if (!this.refundReason) {
					return this.$message.info('请输入拒绝原因')
				}
				this.$api.post('/v1/63e4ab6dafd48', {
					reject_reason: this.refundReason,
					rfid: this.id
				}).then(result => {
					if (result.data.code == 1) {
						this.$message.info('已拒绝');
						this.getData();
						this.refundReason=''
						this.refundPop = false
					} else {
						this.$message.info(data.msg);
					}
				}).catch(err => {
					this.$message.info('服务器错误，请稍后重试');
				});
			},
			// 确认收货
			confirmReciver() {
				let that = this;
				this.$util.showModal({
					title: global.i18n['提示'],
					content: '确认收货后 退款金额原路返到用户的账号中',
					success: (res)=> {
						console.log(res,'res');
						if (res.confirm) {
							that.$api.post('/v1/63fec5e13eb20', {
								id: that.id,
								refund_money:this.afterInfo.refund_money
							}).then(result => {
								console.log(result,'result');
								if (result.data.code == 1) {
									that.$message.info('收货成功');
									uni.$emit('updateAfterOrder');
									setTimeout(() => {
										uni.navigateBack();
									}, 500);
								} else {
									that.$message.info(result.data.msg);
								}
							}).catch(err => {
								console.log(err);
							});
						}
					}
				})
			},
			/**
			 * 删除订单
			 */
			delOrder() {
				let that = this;
				this.$util.showModal({
					title: global.i18n['提示'],
					content: global.i18n['确认删除吗？'],
					success: (res) =>  {
						if (res.confirm) {
							that.$api.post(global.apiUrls.delAfterSale, {
								id: that.id
							}).then(result => {
								if (result.data.code == 1) {
									that.$message.info(that.i18n['删除成功']);
									uni.$emit('updateAfterOrder');
									setTimeout(() => {
										uni.navigateBack();
									}, 500);
								} else {
									that.$message.info(result.data.msg);
								}
							}).catch(err => {
								console.log(err);
							});
						}
					}
				})
			},
			/**
			 * 查看物流
			 */
			lookLog() {
				uni.navigateTo({
					url: '/pages/order/orderdetail/express-delivery/index?server_no=' + this.afterInfo.server_no
				})
			},
			/**
			 * @description copy复制
			 * @param {String} data 数据
			 */
			copyInfo(data) {
				let that = this;
				uni.setClipboardData({
					data,
					success: function() {
						that.$message.info(this.i18n['复制成功']);
						// console.log('success');
					}
				});
			},
			/**
			 * @description 退货查询物流新信息
			 */
			getingPhysical() {
				this.$api
					.post(global.apiUrls.postOrderLogs, {
						order_sn: this.afterInfo.order_sn,
						server_no: this.afterInfo.server_no
					})
					.then(res => {
						if (res.data.code == 1) {
							this.express_name = res.data.data.ShipperCode;
							this.express_no = res.data.data.OrderCode || 0;
							this.physical = res.data.data.Traces.reverse();
						} else {}
					});
			},
			// 预览图片
			previewImage(index) {
				uni.previewImage({
					urls: this.afterInfo.refund_picture,
					current: index
				});
			},
			getCustomerInfo() {
				this.$api
					.post(global.apiUrls.postSystemConfig, {
						store_id: 1,
						goods_id: '',
						order_sn: this.order_sn,
					})
					.then((res) => {
						res = res.data;
						if (res.code == 1) {
							this.service_info = res.data
						}
					})
					.catch((err) => {
						console.error(err);
					});
			},
			//联系客服
			toCustomer() {
				this.$urouter.navigateTo('/pages/index/contactUs/index')
				return
				// 基础版本h5客服，需要时开启
				let that = this
				console.log(this.service_info.chat_url);
				let params_str = this.service_info.chat_url.split('?')[1];
				let url = this.service_info.chat_url.split('?')[0];
				let params_arr = params_str.split('&').reduce(function(total, item) {
					let arr = item.split('=');
					total[arr[0]] = arr[1];
					return total;
				}, {});
				console.log('params_arr', url, params_arr);

				this.$util.actionAuth(() => {
					this.$urouter.navigateTo({
						url: '/pages/service-message/service/service-detail/custom',
						params: {
							chat_url: url,
							goods_id: '',
							token: params_arr.token,
							order_sn: this.order_sn
						}
					});
				});
			},
			// 去详情页
			navToDetail() {
				this.$urouter.navigateTo({
					url: '/pages/goods/goodsdetail/goods-detail/index',
					params: {
						goods_id: this.afterInfo.goods_id,
						sku_id: this.afterInfo.sku_id
					}
				});
			},
			// 取消售后
			cancelAfter() {
				let that = this;
				this.$util.showModal({
					title: global.i18n['提示'],
					content: global.i18n['确认取消吗？'],
					success: (res) => {
						if (res.confirm) {
							that.$api.post(global.apiUrls.getGoodsAfterSaleCentel, {
								id: that.id
							}).then(res => {
								if (res.data.code == 1) {
									this.backSuccessShow = true;
									// 通知页面更新数据
									uni.$emit('updateAfterOrder');
									that.getData();
								} else {
									this.$message.info(res.data.msg);
								}
							}).catch(err => {
								this.$message.info('服务器错误，请稍后重试');
							});
						}
					}
				})
			},
			//
			getData() {
				let that = this;
				that.$api
					.post('/v1/63e4b26a99200', {
						refund_id: that.id
					})
					.then(res => {
						if (res.data.code == 1) {
							this.initSteps = true
							let data = res.data.data;
							this.afterInfo = res.data.data;
							this.goodsInfo = {
								goods_name: this.afterInfo.goods_name,
								goods_thumb: this.afterInfo.goods_thumb,
								num: this.afterInfo.num,
								sku_name: this.afterInfo.sku_name,
								sku_id: this.afterInfo.sku_id,
								refund_money: this.afterInfo.refund_money,
								shop_price: this.afterInfo.shop_price
							}
							this.refund_money = data.refund_money;
							this.refund_time = data.refund_time;
							this.refund_account = data.refund_account || '原路返回';
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			/**
			 * @description 步骤器当前步数  -2售后取消 -1商家驳回 0等待商家处理 1商家同意 2商家已收货 3退款 4商家已发货
			 */
			filterStatus(status) {
				console.log('步骤器==>', status);
				let that = this;
				switch (Number(status)) {
					case -2:
						// that.statusStr = global.i18n['售后关闭'];
						that.speed = 1;
						break;
					case -1:
						// that.statusStr = global.i18n['商家已驳回,如有疑问请联系商家客服'];
						// that.steps = [
						//   {
						//     title: global.i18n['提交申请']
						//   },
						//   {
						//     title: global.i18n['商家驳回']
						//   }
						// ];
						that.speed = 1;
						break;
					case 0:
						that.statusStr = global.i18n['请等待商家处理'];
						that.speed = 0;
						break;
					case 1:
						if (that.afterInfo.refund_type == '1') {
							// that.statusStr = global.i18n['商家已同意您的售后申请,将在(1-3)工作日内退款'];
						} else {
							// that.statusStr = global.i18n['商家已同意您的售后申请,请尽快寄回商品'];
						}
						that.speed = 1;
						if (that.afterInfo.express_no) that.speed = 2;
						break;
					case 2:
						// that.statusStr = global.i18n['商家已收货,将在(1-3)工作日处理'];
						that.speed = 2;
						break;
					case 3:
						if (that.afterInfo.refund_type == 1) {
							that.speed = 3;
						}
						that.statusStr = global.i18n['售后已完成'];
						that.speed = 4;
						break;
					case 4:
						if (that.afterInfo.refund_type == '3') {
							that.speed = 3;
						}
						// that.statusStr = global.i18n['商家已发货,感谢您对本平台的支持'];
						break;
				}
			},
			motifyAfter(item) {
				this.$urouter.navigateTo({
					url: '/pages/order/afterorder/afterorder-apply/index',
					params: {
						sku_id: item.sku_id,
						order_sn: item.order_sn,
						goods_id: item.goods_id,
						status: item.status,
						index: this.index,
						order_type: item.order_type,
						back: 2,
						server_no: item.server_no,
					}
				});
			},
		},
		filters: {
			// 过滤订单状态 0：申请中  1：待取货  2、3：待收货  4：已完成   -1：售后取消   -2：已拒绝
			statusFil(val) {
				let data = {
					'status_-2': '已拒绝',
					'status_-1': '售后取消',
					status_0: '申请中',
					status_1: '待取货',
					status_2: '待收货',
					status_3: '待收货',
					status_4: '已完成',
					status_5: '已完成',
				};
				return data['status_' + val] || '';
			},
			// 订单状态图片
			statusIconPt(val) {
				let data = {
					status_1: '../../static/icon-status-3.png',
					status_2: '../../static/icon-status-3.png',
					status_3: '../../static/icon-status-3.png',
				};
				return data['status_' + val] || '';
			},
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		overflow: hidden;
		background-image: url('../../static/bg-1.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		min-height: calc(100vh - 88rpx);
		font-family: PingFang SC;
		padding-top: calc(88rpx + var(--status-bar-height));
		padding-bottom: calc(120rpx + constant(safe-area-inset-bottom));
		padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
	}

	// 顶部导航栏-开始
	.cu-bar {
		background-image: url('../../static/bg-1.png');
		background-repeat: no-repeat;
		background-size: 100% auto;
		color: white;
		box-shadow: none;
	}

	.text-2f {
		color: #2f98fe;
	}

	.margin-top-8 {
		margin-top: 8rpx;
	}

	.margin-top-10 {
		margin-top: 10rpx;
	}

	.margin-top-16 {
		margin-top: 16rpx;
	}

	.margin-top-14 {
		margin-top: 14rpx;
	}

	.padding-lr-24 {
		padding: 0 24rpx;
	}

	.margin-lr-24 {
		margin: 0 24rpx;
	}

	.img-wrap {
		width: 160rpx;
		height: 160rpx;
		margin-right: 10rpx;
	}

	.backAddress {
		padding: 32rpx 24rpx;
	}

	.text-4d {
		color: #4DC777;
	}

	.fu-bgcred1 {
		width: 100%;
		height: 240rpx;
		padding-top: 48rpx;
		position: relative;

		.img {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 240rpx;

		}
	}

	.block-200 {
		width: 200rpx;
		min-width: 200rpx;
		height: 200rpx;
		min-height: 200rpx;
		border-radius: 16rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.radius-16 {
		border-radius: 16rpx;
	}

	.add {
		// background: $bgtheme !important;
		// color: $uni-text-color-inverse;
		width: 170rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #F6F6F6;
		border-radius: 50px;
		font-size: 24rpx;
		color: #333333;
		font-weight: 400;
		text-align: center;
		border: none;
	}

	.cu-btn[class*="line"]::after {
		border: none;
	}

	.list-item {
		word-break: break-all;

		.title {
			display: inline-block;
			width: calc(4em + 40rpx);
			font-size: 24rpx;
			color: #999999;
			font-weight: 400;
			flex-shrink: 0;
		}
	}

	.list-item+.list-item {
		margin-top: 32rpx;
	}

	.bottom-action {
		width: 100%;
		padding: 0 32rpx;
		height: 100rpx;
		height: calc(100rpx + constant(safe-area-inset-bottom));
		height: calc(100rpx + env(safe-area-inset-bottom));
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		z-index: 99;
	}

	.word-break-all {
		word-break: break-all;
	}

	// 换货 start
	.fu-back-acrgo {
		padding: 0 32rpx 0 32rpx;
		overflow: hidden;
		border-radius: 20rpx;

		.cu-timeline>.cu-item {
			padding: 30rpx 30rpx 30rpx 68rpx;
		}

		.cu-timeline>.cu-item::before {
			left: 0;
		}

		.cu-timeline>.cu-item::after {
			left: 24rpx;
		}
	}

	// 换货 end
	.uni-steps {
		position: relative;
		z-index: 11;
	}

	.comment-title-1 {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		padding-bottom: 24rpx;
		margin-bottom: 24rpx;
		position: relative;

		&::before {
			content: '';
			width: 100%;
			height: 1px;
			background: #EEEEEE;
			transform: scaleY(0.5);
			position: absolute;
			left: 0;
			bottom: 0;
		}
	}

	.comment-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333333;
		padding-bottom: 24rpx;
		margin-bottom: 24rpx;
		text-indent: 22rpx;
		position: relative;

		&::before {
			content: '';
			width: 100%;
			height: 1px;
			background: #EEEEEE;
			transform: scaleY(0.5);
			position: absolute;
			left: 0;
			bottom: 0;
		}

		&::after {
			content: '';
			width: 6rpx;
			height: 30rpx;
			border-radius: 4rpx;
			background: $bgtheme;
			;
			position: absolute;
			left: 0;
			top: 8rpx;

		}
	}

	.kefu {

		.img {
			display: inline-block;
			vertical-align: middle;
			overflow: hidden;
			width: 32rpx;
			height: 32rpx;
			margin-right: 18rpx;
			margin-top: -4rpx;
		}
	}

	.back-success-wrap {
		.mask {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			z-index: 99;
			background: rgba(0, 0, 0, 0.3);
		}

		.back-content {
			position: fixed;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			z-index: 100;
			width: 540rpx;

			// height: 424rpx;
			.back-content-info {
				border-radius: 25rpx;
				width: 540rpx;
				height: 526rpx;


				.text {
					font-size: 150rpx;
				}
			}
		}
	}

	.text-62 {
		font-size: 60rpx;
		margin-top: 48rpx;
	}

	.afterStatus {
		position: relative;
		z-index: 11;
		margin-top: -30rpx;

		&.up {
			margin-top: -180rpx;
		}
	}

	.posZindex {
		position: relative;
		z-index: 11;
	}

	.box-kong {
		position: absolute;
		border-radius: 16rpx 0 16rpx 0;
		left: 0;
		top: 0;
		z-index: 9;
		background: rgba(0, 0, 0, 0.6);
	}

	// 订单状态-开始
	.status-box {
		margin: 20rpx 24rpx;

		.status {
			font-size: 32rpx;
			margin-bottom: 8rpx;
		}

		.icon {
			width: 140rpx;
			height: 140rpx;
			margin-right: 14rpx;
		}
	}

	.body_top {
		background: #fff;
		border-radius: 16rpx;
		margin: 24rpx auto 0;
		width: 702rpx;
	}
</style>
